<template>
  <div ref="percentChartRef" />
</template>

<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, markRaw, defineProps } from "vue";
import * as echarts from "echarts";

// 接收参数
const props = defineProps({
  data: Object
});
const apiData = props.data;

// 图表绘制逻辑
const percentChartRef = ref<HTMLDivElement | null>(null);
const percentChartRefInstance = ref<echarts.ECharts | null>(null);
const initPercentOption = ref<echarts.EChartOption>({});

const color: string[] = [
  "#00ffff",
  "#409B5C",
  "#ffe000",
  "#ffa800",
  "#ff5b00",
  "#2b89f8",
  "#fa512a"
];

const getData = () => {
  let data = [];
  for (let i = 0; i < 50; i++) {
    if (i % 2 === 0) {
      data.push({
        value: 5,
        itemStyle: {
          normal: {
            color: "#96ebfa"
          }
        }
      });
    } else {
      data.push({
        value: 20,
        itemStyle: {
          normal: {
            color: "rgb(0,0,0,0)",
            borderWidth: 1,
            borderColor: "#51d3e6"
          }
        }
      });
    }
  }
  return data;
};

const doing = () => {
  let option = percentChartRefInstance.value.getOption();
  option.series[1].startAngle = option.series[1].startAngle - 1;
  percentChartRefInstance.value.setOption(option);
};

const timer = ref<any>(null);
const startTimer = () => {
  timer.value = setInterval(doing, 100);
};

let int = apiData.value.toFixed(2).split(".")[0];
let float = apiData.value.toFixed(2).split(".")[1];
let title = apiData.title;
initPercentOption.value = {
  title: {
    // text: title,
    text: "{a|" + title + "}\n{b|" + int + "}{c|." + float + "%}",
    x: "center",
    y: "35%",
    textStyle: {
      // lineHeight: 50,
      rich: {
        a: {
          fontSize: 18,
          fontWeight: "600",
          color: "#19E1E3",
          padding: [5, 0]
        },
        b: {
          fontSize: 24,
          color: "#fff",
          fontWeight: "500",
          fontStyle: "oblique"
        },
        c: {
          fontSize: 18,
          color: "#fff",
          fontStyle: "oblique"
          // padding: [0, 0, 14, 0]
        }
      }
    }
  },
  series: [
    {
      type: "gauge",
      radius: "80%",
      //clockwise: false,
      startAngle: "90",
      endAngle: "-269.9999",
      splitNumber: 18,
      pointer: {
        show: false
      },
      detail: {
        formatter: " "
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: [
            [0, "#2CFAFC"],
            [apiData.value / 100, "#0ff9"],
            [1, "#0f232e"]
          ],
          width: 15
        }
      },
      axisTick: {
        show: false
      },
      splitLine: {
        show: true,
        length: 1,
        lineStyle: {
          shadowBlur: 30,
          shadowOffsetY: "0",
          shadowColor: "rgba(0, 255, 255,.3)",
          color: "rgba(67,120,149,0.6)",
          width: 1
        }
      },
      axisLabel: {
        show: false
      }
    },
    {
      //动态圈
      type: "pie",
      radius: ["55%", "55.3%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          color: "rgba(0, 255, 255, 2)"
        }
      },
      label: {
        show: false
      },
      data: getData()
    },
    {
      //小光晕
      type: "pie",
      radius: ["85%", "85.5%"],
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 30,
          shadowColor: "rgba(0, 255, 255,.3)",
          color: "rgba(67,120,149,0.6)"
        }
      },
      label: {
        show: false
      },
      data: [100]
    },
    {
      //大光晕
      type: "pie",
      radius: ["88%", "89.5%"],
      hoverAnimation: false,
      clockWise: true,
      itemStyle: {
        normal: {
          shadowBlur: 30,
          shadowColor: "rgba(0, 255, 255,0.5)",
          color: "rgba(67,120,149,0.6)"
        }
      },
      label: {
        show: false
      },
      data: [100]
    }
  ]
};

const initPercentChart = () => {
  if (percentChartRef.value) {
    percentChartRefInstance.value = markRaw(
      echarts.init(percentChartRef.value)
    );
    percentChartRefInstance.value.setOption(initPercentOption.value, true);
  }
};

// 挂载后动作 -- 初始化图表
onMounted(() => {
  initPercentChart();
  startTimer();
  // 图表自适应
  window.addEventListener("resize", () => {
    if (percentChartRefInstance.value) {
      percentChartRefInstance.value.resize();
    }
  });
});

// 销毁前动作 -- 销毁图表
onBeforeUnmount(() => {
  if (percentChartRefInstance.value) {
    percentChartRefInstance.value.dispose();
  }
  if (timer.value) {
    clearInterval(timer.value);
  }
});
</script>

<style scoped lang="scss"></style>
